<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Banner图片切换</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div id="mask">
      <div class="center">
        <h2 class="title">天猫双十二惊喜袭来</h2>
        < img alt="未正确加载图片资源"  v-bind:src="sum[time]"/>
        <a
          href=" "
          class="left"
        >
          < img src="./images/left.png" alt="未正确加载图片资源" v-show="isShowL" @click="jian"/>
        </a >
        <a
          href="javascript:void(0)"
          class="right"
        >
          < img src="./images/right.png" alt="未正确加载图片资源" v-show="isShowR" @click="add"/>
        </a >
      </div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      let app = new Vue({
        el: "#mask",
        data: {
          sum: [
            'images/01.jpg',
            'images/02.jpg',
            'images/03.jpg',
            'images/04.jpg'
          ],
          time: 2,
          isShowL: true,
          isShowR: true
        },
        methods: {
          jian(){
            if(this.time>=1){
              this.isShowL = true;
            }
            else this.isShowL = false;
            if(this.time<3){
              this.isShowR = true;
            }
            else this.isShowR = false;
            if(this.isShowL){
              this.time--;
            }
          },
          add(){
            if(this.time<3){
              this.isShowR = true;
            }
            else this.isShowR = false;
            if(this.time>=1){
              this.isShowL = true;
            }
            else this.isShowL = false;
            if(this.isShowR){
              this.time++;
            }
          }
        }
      });
    </script>
  </body>
</html>